<template>
  <div id="app">
    <div class="box" @contextmenu.prevent>
<!--      <div class="box1" @click.stop="onFun('click box1')">-->
      <div class="box1" @scroll.prevent="onScroll">
        <div
          :class="`box2`"
          @click.stop="onFun('click box2')"
        ></div>
        <!--<div
          :class="`box2`"
          v-on:click="onFun('click box')"
          @mousedown="onFun('down', $event, 'ccc')"
          @mouseup="onFun('up box', $event)"
        ></div>-->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {

    }
  },
  methods: {
    onScroll() {
      console.log(123)
      // console.log(event)
    },
    oncontextmenu(event) {
      console.log(event)
    },
    onFun(from) {
      console.log(from)
      console.log('=================')
    },
    /*onFun(from, event, c) {
      console.log(from)
      console.log(event)
      console.log(c)
      // console.log(event.target)
      console.log('=================')
    },*/
    down() {
      console.log('box2 down')
    },
    up() {
      console.log('box2 up')
    }
  }
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }

  .box {
    height: 600px;
    width: 600px;
    background: #2c3e50;
  }

  .box1 {
    height: 400px;
    width: 400px;
    background: #fd3952;
    overflow: auto;
  }
  .box2 {
    height: 800px;
    width: 200px;
    background: #8d1dfd;
  }
</style>
